<template>
  <el-container class="footer-content-wrapper">
    <el-row class="footer-content-page">
      <el-col :span="12">
        <div class="footer-name">主页</div>
        <div class="footer-info">Copyright © 2015-2020 个人博客中心 gank.io 沪ICP备13038357号-9</div>
      </el-col>
      <el-col :span="12">
        <el-avatar class="avatar" :src="circleUrl"></el-avatar>
        <el-avatar class="avatar" :src="circleUrl"></el-avatar>
        <el-avatar class="avatar" :src="circleUrl"></el-avatar>
      </el-col>
    </el-row>
  </el-container>
</template>

<script>
  export default {
    name: 'FooterContent',
    data () {
      return {
        circleUrl: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
      }
    }
  }
</script>

<style lang="scss" ref="stylesheet/scss" scoped>
  .footer-content-wrapper {
    padding-bottom: 30px;
    padding-top: 30px;
    text-align: center;
    color: white;
    background-color: rgba(29, 30, 31, 1);
    border-top: 1px solid rgba(30, 35, 42, .06);
    box-shadow: 0 4px 10px 10px rgba(0, 0, 0, .05);
    transition: background .6s ease-in-out, padding .6s ease-in-out;
    width: 100%;

    .footer-content-page {
      width: 100%;

      .avatar {
        margin-left: 5px;
        margin-right: 5px;
      }

      .footer-name {
        text-align: left;
        width: 440px;
        margin: 0 auto;
      }

      .footer-info {
        text-align: left;
        padding-top: 10px;
        width: 440px;
        margin: 0 auto;
      }
    }

  }
</style>
